import { useEffect, useState} from 'react'
import api from '../api'

function Settings () {
    let user = sessionStorage.getItem('user') 
    user = user ? JSON.parse(user) : {}
    const [image, setImage] = useState(user.image)
    const [username, setUsername] = useState(user.username)
    const [bio, setBio] = useState(user.bio)
    const [email, setEmail] = useState(user.email)
    const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: user.token
        }
    }
    const updateUser = async (e) => {
        e.preventDefault();
        console.log('updateUser', {
            user:{
              email: email,
              bio: bio,
              image:image,
              username
            }
          })
        try {
          const res = await api.axios.put(api.url.updateUser, {
            "user":{
              "email": email,
              "bio": bio,
              "image":image,
              username
            }
          }, config);
          let response = res.data
          if(response.code === 0) {
              alert('更新成功')
          } else {
            alert(response.message)
          }
          console.log('updateUser', response);
        } catch (error) {
          console.log(error);
        }
    };

    const logout = () => {
        sessionStorage.setItem('user', '')
    }

    const handleChangeImage = (e) => {
        setImage(e.target.value)
    }
    const handleChangeUsername = (e) => {
        setUsername(e.target.value)
    }
    const handleChangeBio = (e) => {
        setBio(e.target.value)
    }
    const handleChangeEmail = (e) => {
        setEmail(e.target.value)
    }

    return (
        <div className="settings-page">
            <div className="container page">
                <div className="row">
                    <div className="col-md-6 offset-md-3 col-xs-12">
                        <h1 className="text-xs-center">Your Settings</h1>
                        <form>
                            <fieldset>
                                <fieldset className="form-group">
                                    <input className="form-control" type="text" value={image} onChange={handleChangeImage} placeholder="URL of profile picture" />
                                </fieldset>
                                <fieldset className="form-group">
                                    <input className="form-control form-control-lg" value={username} onChange={handleChangeUsername} type="text" placeholder="Your Name" />
                                </fieldset>
                                <fieldset className="form-group">
                                    <textarea className="form-control form-control-lg" value={bio} onChange={handleChangeBio} rows={8} placeholder="Short bio about you" defaultValue={""} />
                                </fieldset>
                                <fieldset className="form-group">
                                    <input className="form-control form-control-lg" value={email} onChange={handleChangeEmail} type="text" placeholder="Email" />
                                </fieldset>
                                <fieldset className="form-group">
                                    <input className="form-control form-control-lg" disabled type="password" placeholder="Password" />
                                </fieldset>
                                <button className="btn btn-lg btn-primary pull-xs-right" onClick={updateUser}>Update Settings</button>
                            </fieldset>
                        </form>
                        <hr />
                        <button className="btn btn-outline-danger" onClick={logout}>Or click here to logout.</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Settings;